<template>
    <div id="videoAdmin">
        <el-tabs v-model="pageQuery.status" @tab-click="getData">
            <el-tab-pane label="待审核" name="0">
            </el-tab-pane>
            <el-tab-pane label="审核通过" name="2">
            </el-tab-pane>
            <el-tab-pane label="审核不通过" name="1">
            </el-tab-pane>
        </el-tabs>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="userName"
                    label="用户名称"
                    width="120">
                <template slot-scope="scope">
                    <span>
                        {{scope.row.userName}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="发布时间"
                    width="300">
                <template slot-scope="scope">
                    <span>
                        {{scope.row.createTime|timestampToTime}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="标题"
                    width="300">
                <template slot-scope="scope">
                    <span>
                        {{scope.row.title}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="introduction"
                    label="简介"
                    width="400">
                <template slot-scope="scope">
                    <el-tooltip content="Bottom center" placement="bottom" effect="light">
                        <span>
                        {{scope.row.introduction}}
                    </span>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="350"
                    fixed="right">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row.id)" size="mini">查看</el-button>
                    <el-button v-if="scope.row.status == 0" @click="deleteVideo(1, scope.row)" size="mini">审批通过</el-button>
                    <el-button v-if="scope.row.status == 0" @click="deleteVideo(2, scope.row)" size="mini">审批驳回</el-button>
                    <el-button @click="deleteVideo(0, scope.row)" type="danger" size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <Pagination v-bind:child-msg="pageparm" @callFather="pageCallFather"></Pagination>
    </div>
</template>

<script>
    import Pagination from "@/components/Pagination";
    import {selectVideoByCondition, updateVideo} from "@/api/adminFun";
    import {Loading, Message, MessageBox} from 'element-ui';
    export default {
        name: "videoAdmin",
        components:{
            Pagination
        },
        data(){
            return{
                tableData: [],
                pageQuery:{
                    title: '',
                    status: '0',
                    pageIndex: 0,
                    pageSize: 10
                },
                pageparm: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                }
            }
        },
        created(){
          this.getData();
        },
        methods:{
            getData(){
                selectVideoByCondition(this.pageQuery).then(res=>{
                    if (res.status == 200) {
                        this.tableData = res.data.data;
                        this.pageparm = res.data.totalCount;
                    }else {
                        Message.error(res.message);
                    }
                })
            },

            handleClick(id) {
                let routeUrl = this.$router.resolve({
                    path: '/videos/videoDetail',
                    query: {
                        videoId: id
                    }
                });
                window.open(routeUrl.href, '_blank');
            },

            deleteVideo(type, row) {
                let params = {
                    id: row.id
                }
                if (type == 0) {
                    params.dr = 0;
                    MessageBox.confirm('此操作将永久删除该视频, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        updateVideo(params).then(res=>{
                            if (res.status == 200) {
                                Message.success(res.message);
                                this.getData();
                            }else{
                                Message.error(res.message);
                            }
                        })
                    });
                }else if (type == 1) {//通过
                    params.status = 2;
                    updateVideo(params).then(res=>{
                        if (res.status == 200) {
                            Message.success(res.message);
                            this.getData();
                        }else{
                            Message.error(res.message);
                        }
                    })
                }else if (type == 2) {//驳回
                    params.status = 1;
                    updateVideo(params).then(res=>{
                        if (res.status == 200) {
                            Message.success(res.message);
                            this.getData();
                        }else{
                            Message.error(res.message);
                        }
                    })
                }
            },

            // 分页插件事件
            pageCallFather(param) {
                this.pageQuery.pageIndex = param.currentPage - 1;
                this.pageQuery.pageSize = param.pageSize;
                this.getData();
            },
        }
    }
</script>

<style>
    #videoAdmin .el-table td{
        border-bottom: none;
    }
    #videoAdmin .el-table th, .el-table tr{
        background-color: #272727;
    }
    #videoAdmin .el-tabs__item{
        color: white;
    }
    #videoAdmin .el-tabs__item.is-active {
        color: #f3cd20;
    }
    #videoAdmin .el-tabs__active-bar {
        background-color: #f3cd20;
    }
    #videoAdmin .el-table th, .el-table .el-table__row {
        color: white;
        background: rgb(48, 49, 51);
    }
    #videoAdmin .el-table th, .el-table .el-table__row:hover {
        color: #67C23A;
    }
    #videoAdmin .el-table, .el-table__expanded-cell{
        background: rgb(48, 49, 51);
    }

    #videoAdmin .el-table th, .el-table .el-table__row:hover{
        color: #f3cd20;
    }
</style>
